<template>
  <div class="app-container">
    <dv-border-box-11 title="图片滤镜（高级版）">
      <div style="padding: 60px 60px 100px;">
        <dv-decoration-10 style="width:100%;height:40px;"/>
        <h1>核心能力</h1>
        用户上传一张人脸图片，基于人脸编辑与生成算法，为图片添加指定类型滤镜（类型更全面）。
        <el-row>
          <el-col :span="12">
            <dv-border-box-9>
              <div style="text-align:center;margin: 20px;padding: 20px;height: 650px">
                <div style="margin:10px">
                  <el-select v-model="form.filterType" placeholder="请选择滤镜类型" clearable>
                    <el-option
                      v-for="dict in filterTypeOption"
                      :key="dict.code"
                      :label="dict.value"
                      :value="dict.code"
                    />
                  </el-select>
                  <span style="margin-left: 10px"> 滤镜效果0~100：<el-input-number v-model="form.filterDegree" :min="0" :max="100"></el-input-number></span>
                </div>
                <image-identify-oss @input="getUrlList"></image-identify-oss>
                <el-input placeholder="请输入在线图片url（上传图片和输入url二选一）" v-model="form.url" class="input-with-select">
                  <el-button slot="append" icon="el-icon-search" @click="searchStyleImagePro"></el-button>
                </el-input>
              </div>
            </dv-border-box-9>
          </el-col>
          <el-col :span="12">
            <dv-border-box-9>
              <div style="height: 650px;margin: 20px;padding: 20px">
                <el-collapse v-model="collapse" accordion>
                  <el-collapse-item title="识别结果" name="1">
                    <div>
                      <el-image :src="responseData.resultUrl" :preview-src-list="responseData.resultUrlList" style="width: 200px; height: 200px"></el-image>
                    </div>
                  </el-collapse-item>
                  <el-collapse-item title="Request" name="2">
                    <json-viewer :value="form" closed="true" :expand-depth="1" icon-style copyable boxed :sort="true" :expanded="true" :preview-mode="false"></json-viewer>
                  </el-collapse-item>
                  <el-collapse-item title="Response" name="3">
                    <json-viewer :value="responseData" closed="true" :expand-depth="1" icon-style copyable boxed :sort="true" :expanded="true" :preview-mode="false"></json-viewer>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </dv-border-box-9>
          </el-col>
        </el-row>
      </div>
    </dv-border-box-11>
  </div>
</template>

<script>
import JsonViewer from 'vue-json-viewer'
import {styleImagePro} from "@/api/txcloud/face/faceshizhuang";

export default {
  components: {
    JsonViewer
  },
  data() {
    return {
      collapse: '0',
      form: {
        filterDegree: 80,
        filterType:11
      },
      responseData: {
        resultUrlList: []
      },
      filterTypeOption: [
        {code: 1, value: '白茶'},
        {code: 2, value: '白皙'},
        {code: 3, value: '初夏'},
        {code: 4, value: '东京'},
        {code: 5, value: '告白'},
        {code: 6, value: '暖阳'},
        {code: 7, value: '蔷薇'},
        {code: 8, value: '清澄'},
        {code: 9, value: '清透'},
        {code: 10, value: '甜薄荷'},
        {code: 11, value: '默认'},
        {code: 12, value: '心动'},
        {code: 13, value: '哑灰'},
        {code: 14, value: '樱桃布丁'},
        {code: 15, value: '自然'},
        {code: 16, value: '清逸'},
        {code: 17, value: '黑白'},
        {code: 18, value: '水果'},
        {code: 19, value: '爱情'},
        {code: 20, value: '冬日'},
        {code: 21, value: '相片'},
        {code: 22, value: '夏日'},
        {code: 23, value: '香氛'},
        {code: 24, value: '魅惑'},
        {code: 25, value: '悸动'},
        {code: 26, value: '沙滩'},
        {code: 27, value: '街拍'},
        {code: 28, value: '甜美'},
        {code: 29, value: '初吻'},
        {code: 30, value: '午后'},
        {code: 31, value: '活力'},
        {code: 32, value: '朦胧'},
        {code: 33, value: '悦动'},
        {code: 34, value: '时尚'},
        {code: 35, value: '气泡'},
        {code: 36, value: '柠檬'},
        {code: 37, value: '棉花糖'},
        {code: 38, value: '小溪'},
        {code: 39, value: '丽人'},
        {code: 40, value: '咖啡'},
        {code: 41, value: '嫩芽'},
        {code: 42, value: '热情'},
        {code: 43, value: '渐暖'},
        {code: 44, value: '早餐'},
        {code: 45, value: '白茶'},
        {code: 46, value: '白嫩'},
        {code: 47, value: '圣代'},
        {code: 48, value: '森林'},
        {code: 49, value: '冲浪'},
        {code: 50, value: '奶咖'},
        {code: 51, value: '清澈'},
        {code: 52, value: '微风'},
        {code: 53, value: '日落'},
        {code: 54, value: '水光'},
        {code: 55, value: '日系'},
        {code: 56, value: '星光'},
        {code: 57, value: '阳光'},
        {code: 58, value: '落叶'},
        {code: 59, value: '生机'},
        {code: 60, value: '甜心'},
        {code: 61, value: '清逸'},
        {code: 62, value: '春意'},
        {code: 63, value: '罗马'},
        {code: 64, value: '青涩'},
        {code: 65, value: '清风'},
        {code: 66, value: '暖心'},
        {code: 67, value: '海水'},
        {code: 68, value: '神秘'},
        {code: 69, value: '旧调1'},
        {code: 70, value: '旧调2'},
        {code: 71, value: '雪顶'},
        {code: 72, value: '日光'},
        {code: 73, value: '浮云'},
        {code: 74, value: '流彩'},
        {code: 75, value: '胶片'},
        {code: 76, value: '回味'},
        {code: 77, value: '奶酪'},
        {code: 78, value: '蝴蝶'}
      ]
    }
  },
  created() {
  },
  methods: {
    searchStyleImagePro() {
      styleImagePro(this.form).then(res => {
          if (res.code === 200) {
            this.responseData = res.data
            let a = []
            a.push(res.data.resultUrl)
            this.responseData.resultUrlList = a
            this.collapse = '1'
            this.$modal.msgSuccess(res.msg);
          } else {
            this.responseData.hasText = "false"
            this.$modal.msgError(res.msg);
          }
        }
      )
    },
    getUrlList(val) {
      this.form.url = val
    },
    getImageBase64(val) {
      this.form.image = val
    },
  }
};
</script>
<style lang="scss" scoped>
.input-with-select .el-input-group__prepend {
  background-color: #fff;

  .el-select {
    width: 10vw;
  }
}
</style>
